import React, { Component } from 'react'
import styles from "../homePage.less"
import { getHotTags, getRecommendSongList, getTagSongList } from "../../../api/homePage"
import classNames from 'classnames';
import { Swiper, SwiperSlide } from 'swiper/react';
import { spliceSongLit } from '../../../utils/querySearch';
import Icon from '../../../components/icon/Icon';
import { withRouter } from "react-router-dom"
class SongListRecommend extends Component {
  state = {
    tags: [],
    selectId: "",
    songListData: []
  }
  componentDidMount() {
    this.getTags()
    this.setUiSongList({id: "官方推荐"})
  }
  getTags = async () => {
    let res = await getHotTags()
    console.log(res);
    this.setState({
      tags: [
        {
          name: "官方推荐",
          id: "官方推荐",
        },
        ...res.tags
      ]
    })
  }
  setUiSongList = async (detail) => {
    const { selectId } = this.state
    if (detail.id !== selectId) {
      let width = window.innerWidth;
      let size = width > 800? 5: 3;
      let arr = []
      if (detail.id == "官方推荐") {
        console.log("1");
        let res = await getRecommendSongList()
        if(res.result.length > 0) {
          arr = spliceSongLit(res.result, size)
        }
        // console.log("官方", arr);

      } else {
        let res = await getTagSongList({
          limit: 15,
          cat: detail.name
        })
        if(res.playlists.length > 0) {
          arr = spliceSongLit(res.playlists, size)
        }
        // console.log("非官方", arr);
      }
      this.setState({
        selectId: detail.id,
        songListData: arr
      })
    }
  }
  skipMusicListPage = (detail) => {
    this.props.history.push({pathname: "/music_list", search: "?id=" + detail.id })
  }
  render() {
    const { tags, selectId, songListData } = this.state
    return (
      <div className={styles.song_list_recommend}>
        <div className={styles.title}>歌单推荐</div>
        <div className={styles.tags_box}>
          {
            tags.map(item => (
              <div key={item.id} onClick={() => { this.setUiSongList(item) }} className={classNames(styles.tag, { [styles.select]: selectId == item.id })}>
                {item.name}
              </div>
            ))
          }
        </div>
        <div className={styles.song_list}>
          <Swiper
            onSlideChange={() => {console.log('slide change');this.swiper.activeIndex = 0}}
            onSwiper={(swiper) => {this.swiper = swiper}}
            // spaceBetween={0}
            // slidesPerView={3}
          >
          {
            songListData.length > 0? 
            songListData.map(songList =>(
              <SwiperSlide key={songList[0].id}>
                <div className={styles.song_list_data_box}>
                  {
                    // selectId == "官方推荐"? 
                      songList.map(item => (
                        <div key={item.id} className={styles.song_list_data} onClick={()=> this.skipMusicListPage(item)}>
                          <div className={styles.imgBox}>
                          {selectId == "官方推荐"? 
                            <img src={item.picUrl} alt=""/>
                            :<img src={item.coverImgUrl} alt=""/>}
                          <div className={styles.song_list_keepOut}>
                            <div className={styles.song_list_keepOut_icon}>
                              <Icon type="icon-bofang" />
                            </div>
                          </div>
                          </div>
                          <div className={styles.song_list_name}>
                            {item.name}
                          </div>
                          <div className={styles.song_list_play_count}>
                            播放量：{item.playCount}
                          </div>
                        </div>
                      
                      ))
                  }
                </div>
              </SwiperSlide>
            ))
            : <div className={styles.emptySongList}>暂时没有此类型歌单  请改天再看</div>
          }
        </Swiper>
        </div>
      </div>
    )
  }
}

export default withRouter(SongListRecommend)
